<template>
  <van-action-sheet :value="value" @input="$emit('input', $event)" @closed="editing=false" title="编辑频道" @open='getAllChannels'>
    <div class="channel">
      <div class="tit">
        我的频道：
        <span class="tip">点击可进入频道</span>
        <van-button v-if="!editing" @click="editing=true" size="mini" type="info" plain>编辑</van-button>
        <van-button v-else @click="editing=false" size="mini" type="danger"  plain>完成</van-button>
      </div>
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="(item, index) in channels" :key="item.id">
          <span @click='enterChannel(index)' class="f12" :class='{red: active === index}'>{{item.name}}</span>
          <van-icon @click='deleteChannel(item.id, index)' v-show="editing" class="btn" name="cross"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="channel">
      <div class="tit">可选频道：</div>
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="item in selectChannels" :key="item.id">
          <span class="f12">{{item.name}}</span>
          <van-icon @click='addChannel(item)' class="btn" name="plus"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
  </van-action-sheet>
</template>
<script>
import { getAllChannels, delChannel, addChannel } from '@/api/channel.js'

export default {
  name: 'EditChannel',
  props: {
    value: {
      type: Boolean
    },
    channels: {
      type: Array
    },
    active: {
      type: Number
    }
  },
  data () {
    return {
      editing: false,
      // 所有频道数据
      allChannels: []
    }
  },
  computed: {
    // 计算可选频道
    selectChannels () {
      return this.allChannels.filter(item => {
        // item是所有频道其中之一
        // item不存在于我的频道
        // some的作用：判断数组中是否有满足条件的数据，只要有一个就返回true
        return !this.channels.some(channel => {
          // channel是我的频道其中之一
          return channel.id === item.id
        })
      })
    }
  },
  methods: {
    async addChannel (channel) {
      // 添加频道，要求参数是如下格式
      // seq用于实现当前我的频道的排序
      const orderChannels = this.channels.map((item, index) => ({
        id: item.id,
        name: item.name,
        seq: index
      }))
      orderChannels.push({
        id: channel.id,
        name: channel.name,
        seq: orderChannels.length
      })
      // 后端不让添加【推荐】频道
      if (orderChannels[0].id === 0) {
        orderChannels.splice(0, 1)
      }
      try {
        // 调用接口添加频道
        await addChannel(orderChannels)
        // 通知父组件添加该频道
        this.$emit('add-success', {
          id: channel.id,
          name: channel.name,
          articles: [],
          loading: false,
          finished: false,
          isLoading: false,
          timestamp: Date.now(),
          error: false
        })
        // this.channels.push({
        //   id: channel.id,
        //   name: channel.name,
        //   articles: [],
        //   loading: false,
        //   finished: false,
        //   isLoading: false,
        //   timestamp: Date.now(),
        //   error: false
        // })
      } catch (e) {
        console.log(e)
        this.$toast.fail('添加频道失败')
      }
    },
    async deleteChannel (id, index) {
      // 删除频道
      try {
        // 调用接口删除频道
        await delChannel(id)
        // 页面中删除该频道
        this.$emit('delete-success', index)
      } catch (e) {
        console.log(e)
        this.$toast.fail('删除频道失败')
      }
    },
    enterChannel (index) {
      // 点击频道name进入对应的频道
      // 关闭弹窗
      this.$emit('input', false)
      // 把点中的频道索引传递给父组件
      // this.$emit('update-index', index)
      this.$emit('update:active', index)
    },
    async getAllChannels () {
      // 获取所有频道
      try {
        const ret = await getAllChannels()
        this.allChannels = ret.data.channels
      } catch (e) {
        console.log(e)
        this.$toast.fail('获取所有频道失败')
      }
    }
  }
}
</script>
<style scoped lang="less">
.van-popup--bottom{
  &.van-popup--round{
    border-radius: 0;
  }
}
.van-action-sheet {
  max-height: 100%;
  height: 100%;
  .van-action-sheet__header {
    background: #3296fa;
    color: #fff;
    .van-icon-close {
      color: #fff;
    }
  }
}
.channel {
  padding: 10px;
  .tit{
    line-height: 3;
    .tip {
      font-size: 10px;
      color: #999;
    }
  }
  .van-button {
    float: right;
    margin-top: 7px;
  }
  .btn{
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ddd;
    font-size: 12px;
    color: #fff;
  }
  .f12{
      font-size:12px;
      color: #555;
  }
  .red{
    color: red;
  }
}
</style>
